<template>
  <div class="user">
    <!-- 内容区域 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <!-- <el-col :span="6">
          <el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>-->
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="dialog = true">添加用户</el-button>
          <el-button
            class="filter-item"
            type="warning"
            size="mini"
            @click="handleDownload"
            icon="el-icon-download"
          >导出选中</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table
        :data="usersList"
        border
        stripe
        tooltip-effect="light"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column align="center" label="姓名" prop="user_name"></el-table-column>
        <el-table-column align="center" label="邮箱" prop="user_email"></el-table-column>
        <el-table-column align="center" label="电话" prop="user_mobile"></el-table-column>
        <el-table-column align="center" label="用户类型" prop="user_type">
          <template slot-scope="scope">
            <el-tag>{{scope.row.user_type===1 ? "普通用户":"会员用户"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户状态" prop="user_status">
          <template slot-scope="scope">
            <el-tag>{{scope.row.user_status===1 ? "正常":"注销"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间" prop="user_registerTime"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>-->
    </el-card>
  </div>
</template>

<script>
import utils from '../../plugins/utils'

export default {
  components: {},
  props: {},
  data() {
    return {
      // queryInfo: {
      //   //用户数据列表请求参数
      //   query: '', //查询参数
      //   pagenum: 1, //当前页码
      //   pagesize: 4 //每页显示条数
      // },
      // total: 0, //列表数据总条数
      usersList: [], //用户列表数据
      activeColor: '#13ce66', //状态开关颜色
      multipleSelection: [], //列表选中数组
      tHeader: [
        //导出excel表头
        '序号',
        '姓名',
        '邮箱',
        '电话',
        '用户类型',
        '用户状态',
        '注册时间'
      ],
      filterVal: [
        //导出excel数据
        '_id',
        'user_name',
        'user_email',
        'user_mobile',
        'user_type',
        'user_status',
        'user_registerTime'
      ],
      tableName: '列表excel' //导出excel表名
    }
  },
  created() {
    this.getUserList()
  },
  computed: {},
  methods: {
    //获取用户列表请求
    async getUserList() {
      // const { data: res } = await this.$api.user.userList(this.queryInfo)
      const { data: res } = await this.$api.user.userList()
      if (res.meta.status !== 200) {
        this.$message.error({ message: res.meta.message })
      } else {
        this.usersList = res.data
        // this.total = res.data.total
      }
    },

    //选中列表数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    //Excel导出
    handleDownload() {
      if (this.multipleSelection.length <= 0) {
        this.$message.error({ message: '请先选中需要导出的数据!' })
        return
      }
      //导出Excel方法
      utils.export2Excel(
        this.tHeader,
        this.filterVal,
        this.multipleSelection,
        this.tableName
      )
      // //页码大小
      // handleSizeChange(newSize) {
      //   this.queryInfo.pagesize = newSize
      //   this.getUserList()
      // },

      // //当前页变动
      // handleCurrentChange(newPage) {
      //   this.queryInfo.pagenum = newPage
      //   this.getUserList()
    }
  }
}
</script>

<style lang="sass" scoped>
.el-form
  width: 500px

.el-drawer
  outline: none

.demo-drawer__footer
  margin-left: 20px
</style>